<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <!-- 指令的底层就是对DOM的操作 -->
    <!-- 轮播图：不同的人写的轮播图代码是一样的 -->
    <!-- 指令：避免人为的滥操作DOM -->
    <!-- vue、react都是对DOM的间接操作 -->
    <h2 v-text="counter"></h2>
    <button v-on:click="add">+1</button>
    <hr>
    <h2 v-bind:style="{color:aa}">我是一个h2</h2>
    <button v-on:click="change">变色</button>
    <hr>
    <h2 v-if="show">我是一个h2</h2>
    <button v-on:click="toggle">切换</button>
  </div>
  <script>
    // Vue叫构造器  在Vue2中，new这个构造器，就可以得到一个根组件vm
    // 在Vue3中没有vm，在Vue3中，App.vue是根组件
    // vm代理data中所有的数据
    // this表示vm  
    let vm = new Vue({
      el: "#app",
      // 在data中提供的数据，当数据变了，模板会自动刷新
      data() {
        return {
          name: "码路",
          counter: 1,
          aa: "red",
          show: true
        }
      },
      methods: {
        add() {
          this.counter++
        },
        change() {
          this.aa = "blue"
        },
        toggle() {
          this.show = !this.show;
        }
      },
    });
  </script>
</body>

</html>